<template>
  <a-back-top />
  <a-layout>
    <a-layout-header class="header">
      <div class="logo">
        <img :src="gcuLogo" alt="logo" />
      </div>
      <span>本科专业质量审核工具</span>
    </a-layout-header>

    <a-layout-content class="content">
      <!-- 表头 -->
      <div class="header-title">
        <span class="title">广州城市理工学院本科专业评估评分表</span>
      </div>

      <div class="header-user">
        <div class="preparer">填表人：{{ preparerName }}</div>
        <div class="auditor">审核员：{{ userName }}</div>
        <div class="progress">
          <div>审核进度：</div>
          <a-steps :current="reviewStatus+1" size="small">
            <a-step title="未提交" />
            <a-step title="待审核" />
            <a-step :title="reviewResult" />
          </a-steps>
        </div>
      </div>

      <div class="header-content">
        <div class="job">
          <span>专业</span>
          <a-select
            v-model:value='header.job'
            show-search
            style='width: 200px'
            :options='sortedFilteredMajors'
          >
            <a-back-top />
          </a-select>
        </div>

        <div class="college">
          <span>学院</span>
          <a-select
            v-model:value='header.college'
            show-search

            style='width: 200px'
            :options='
              collegeOptions
            '
          >
          </a-select>
        </div>

        <div class="conclusion">
          <span>自评结论</span>
          <a-textarea disabled v-model:value="header.conclusion" auto-size />
        </div>
      </div>

      <!-- 表格 -->
      <Form
        :fHeader="header"
        @resetHeader="resetHeader"
        @formData="headerData"
        @update="updateHeader"
        @toMajorInfo="getMajorInfo"
        @toReviewStatus="getReviewStatus"
        ref="childRef"
      ></Form>
    </a-layout-content>

    <!-- 底部标注信息栏 -->
    <a-layout-footer style="text-align: center">
      copyright © 2008-2024 粤ICP备10066694号 版权所有：广州市飞元信息科技有限公司
    </a-layout-footer>
  </a-layout>
</template>

<script lang="ts" setup>
import { ref, reactive, watch, computed, onMounted } from 'vue';
import gcuLogo from '../assets/gcu-logo.png';
import Form from './Form.vue';
import MajorDao from '@/daos/major_dao';
import { getUserId, getUserName } from '@/base/constant';

interface Header {
  job: string;
  college: string;
  conclusion: string;
  majorCode: string;
}

const majorDao = new MajorDao();
const data = ref([]);

// 审核员名
const userName = ref<string>(getUserName());
// 专业对应的填表人名
const preparerName = ref<string>();

// 完成审核的专业表单，设置高亮效果
const isActive = ref<string>();

// 审核状态值
const reviewStatus = ref<any>(-2);
// 审核结果
const reviewResult = ref<string>('审核通过');

// 获取当前专业对应的信息
function getMajorInfo(value1: string, value2: string) {
  preparerName.value = value1;
  header.value.conclusion = value2;
}

function getReviewStatus(value: number) {
  reviewStatus.value = value;
  console.log(value)
  if(reviewStatus.value == 1) {
    reviewResult.value = '审核通过';
  } else if(reviewStatus.value == 2) {
    reviewResult.value = '审核不通过';
    reviewStatus.value = 1;
  }
}

// 表头输入框
const header = ref<Header>({
  job: '',
  college: '',
  conclusion: '',
  majorCode: ''
});


onMounted(() => {
  init();
});

// 初始化，向后端发请求获取专业数据
const init = async () => {
  let result = await majorDao.listAll();
  data.value = result.data.data;
};

// 重置表头
const resetHeader = () => {
  (header.value.job = ''),
    (header.value.college = ''),
    (header.value.conclusion = ''),
    (header.value.majorCode = '');
};

// 获取表头数据
function headerData(theader: Header) {
  header.value = theader;
}

// 初始化表头数据
function updateHeader() {
  init();
}

// 监听专业输入框，实现专业-学院联动选择
watch(
  () => header.value.job,
  (val) => {
    const foundObject = data.value.find((item) => item.majorName === val);
    if (foundObject) {
      header.value.job = foundObject.majorName;
      header.value.college = foundObject.collegeName;
      header.value.majorCode = foundObject.majorCode;
      // 触发子组件清空页面
      invokeChildMethodReset();
      // 触发子组件去获取页面的表单数据
      invokeChildMethodGetList(foundObject.majorCode);
    }
  }
);

// 获取所有学院选项
const collegeOptions = computed(() => {
  const colleges = data.value
    .map((pro) => pro.collegeName)
    .filter((value, index, self) => self.indexOf(value) === index)
    .map((value) => ({ value }));
  colleges.unshift({ value: '所有' });
  return colleges;
});

// 过滤并排序专业选项
const sortedFilteredMajors = computed(() => {
  const selectedCollege = header.value.college;
  let filtered = data.value;
  if (selectedCollege && selectedCollege !== '所有') {
    filtered = filtered.filter((pro) => pro.collegeName === selectedCollege);
  }
  const sorted = filtered.slice().sort((a, b) => b.disabled - a.disabled);
  return sorted.map((pro) => ({
    value: pro.majorName,
  }));
});

// 创建子组件的引用
const childRef = ref(null);
// 触发子组件方法
const invokeChildMethodGetList = (param: string) => {
  if (childRef.value) {
    childRef.value.getMajorScoreList(param);
  }
};
const invokeChildMethodReset = () => {
  if (childRef.value) {
    header.value.conclusion = '';
    childRef.value.resetForm();
  }
};

</script>

<style lang="scss" scoped>
@import '../styles/scroll-bar.scss';
.logo {
  height: 100%;
  width: 80px;
  display: flex;
  justify-content: center;
  align-items: center;
  img {
    height: 55px;
    width: 55px;
  }
}

.header {
  background: linear-gradient(to right, white, #7fb4ff, #1677ff);
  padding: 0 !important;
  display: flex;
  margin-bottom: 15px;
  color: #1677ff;

  span {
    font-size: 30px;
    font-weight: 700;
    font-family: 楷体;
  }
}

.content {
  padding: 40px;
  width: 95%;
  margin: 0 auto;
  background: #fff;
  border-radius: 12px;
}

.content .progress {
  display: flex;
  white-space: nowrap;
  width: 60%;
  color: rgba(0, 0, 0, 0.8);
}

.header-user {
  display: flex;
  gap: 80px;
  font-size: 18px;
  margin-left: 5px;
  color: rgba(0, 0, 0, 0.45);
}

.header-content {
  display: flex;
  justify-content: space-around;
  width: 100%;
  gap: 10px;
  margin: 20px 5px;
}

.header-title {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 60px;
  .title {
    font-size: 32px;
    font-weight: bold;
    margin-right: 20px;
  }
}

.job,
.college,
.conclusion {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  white-space: nowrap; /* 防止文本换行 */
}

/* 如果需要调整特定组件的宽度，可以直接在这里设置 */
.ant-select,
.ant-textarea {
  flex: 1; /* 让输入框自适应宽度并均匀分配空间 */
}

.ant-back-top-inner {
  height: 40px;
  width: 40px;
  line-height: 40px;
  border-radius: 4px;
  background-color: #1088e9;
  color: #fff;
  text-align: center;
  font-size: 20px;
}

.completed-option {
  /* 自定义已完成选项的样式，比如改变背景色或文字颜色 */
  background-color: #f0f9eb; /* 举例：浅绿色背景 */
  color: #28a745; /* 举例：深绿色文字 */
}
</style>
